<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>

    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>

    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">系统配置</a>
                <a>
                    <cite>角色权限配置</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>

<div class="layui-container">
    <form class="layui-form" lay-filter="formTest" action="" style="margin-top: 40px">
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="roleId" lay-filter="flag" lay-verify="required">
                    <option value=""></option>
                    <option th:each="role:${roles}" th:value="${role.id}" th:text="${role.roleName}">北京</option>
                </select>
            </div>
        </div>

    </form>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md11 layui-col-md-offset1">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>权限树</legend>
                </fieldset>
                <div id="test1"></div>
            </div>
        </div>
    </div>
    <div class="layui-btn-container" style="margin-top: 40px; margin-left: 100px;">
            <button type="button" id="add" class="layui-btn">添加一级菜单</button>
            <button type="button" id="save"   class="layui-btn">保存配置</button>
    </div>
</div>

<script>
    layui.use(['tree','layer','form'], function () {
        $ = layui.jquery;

        var tree = layui.tree,
            form = layui.form
        ;

        // tree.setChecked('id', [1, 3]); //批量勾选 id 为 2、3 的节点


        form.on('select(flag)', function(data){
            //每次显示前先重载一下
            tree.reload("demoId1");
            var value =  data.value;
            //发送请求获取到当前选择角色的权限
            $.post(`/premission/getFunctionIdsByRoleId/${value}`,function (data) {
                tree.setChecked('demoId1', data); //批量勾选 id 为 2、3 的节点

            });
        });


        $("#save").click(function () {
            //获取所有选择的值
            var data = tree.getChecked('demoId1');

            var roleId =  $("select[name='roleId']").val();

            if(roleId == ""){
                layer.msg("请选择角色",{icon:2});
                return false;
            }


            $.ajax({
                url : `/premission/setFunction?roleId=${roleId}`,
                method : "post",
                data : JSON.stringify(data)
                ,
                contentType : 'application/json',
                success : function (data) {
                    layer.msg("配置已生效",{icon:1});
                },

                error : function () {
                    layer.msg("服务端异常",{ixon:2});
                }

            });
        });

        layui.wangRender = function(){
            $.ajax({
                url : "/premission/FunctionList",
                async : false,
                success : function (data) {

                    //渲染
                    var inst1 = tree.render({
                        elem: '#test1'  //绑定元素
                        , showCheckbox: true
                        , id : 'demoId1'
                        , edit: ['add' , 'del']
                        , data
                        ,click: function(obj){
                            var id = obj.data.id;
                            xadmin.open('编辑节点',`/premission/toEdit?id=${id}`,400,300);
                        }
                        ,operate: function(obj) {
                            var type = obj.type; //得到操作类型：add、edit、del
                            var data = obj.data; //得到当前节点的数据
                            var elem = obj.elem; //得到当前节点元素

                            //Ajax 操作
                            var id = data.id; //得到节点索引
                            if (type === 'add') { //增加节点
                                xadmin.open('添加节点',`/premission/toAdd?id=${id}`,400,300);
                            } else if (type === 'del') { //删除节点
                                if(obj.data.children.length>0){
                                    layer.confirm('检测到当前节点下面有子节点，继续操作会删除当前节点下所有子节点。确定继续吗？', {icon: 3, title:'提示'}, function(index){
                                        //发异步，把数据提交给java
                                        $.post(`/premission/delFunction/${id}`, data.field, function (data) {
                                            if (data) {
                                                parent.layer.msg("删除成功", {icon: 1});
                                            } else {
                                                layer.msg("删除失败", {icon: 2});
                                            }
                                            layui.wangRender();
                                        });

                                        layer.close(index);
                                    });
                                }else {
                                    //发异步，把数据提交给java
                                    $.post(`/premission/delFunction/${id}`, data.field, function (data) {
                                        if (data) {
                                            parent.layer.msg("删除成功", {icon: 1});
                                        } else {
                                            layer.msg("删除失败", {icon: 2});
                                        }
                                    });
                                    layui.wangRender();
                                }

                                layui.wangRender();
                            }
                        }
                    });
                }
            });
        }

        layui.wangRender();

        $("#add").click(function () {
            xadmin.open('添加角色','/premission/toAdd',400,300);
        });



        // $.post(`/premission/getFunctionIdsByRoleId/${value}`,function (data) {
        //
        // });

    });



</script>
</body>
</html>